<template>
    <div>
        <div class="P_management_add">
            <ul><li>
                <el-button type="success" plain @click="handleAddClick" class="P_management_add">增加</el-button>
            </li></ul>
        </div>
        <h2 class="T_title">培训经历管理</h2>
        <el-table :data="tableData" border style="width: 100%">
               <el-table-column prop="number" label="序号" width="60"></el-table-column>
                    <el-table-column prop="state" label="状态"></el-table-column>
                    <el-table-column prop="T_type" label="培训类型"></el-table-column>
                    <el-table-column prop="S_date" label="开始日期" width="100"></el-table-column>
                    <el-table-column prop="E_date" label="结束日期" width="100"></el-table-column>
                    <el-table-column prop="T_institutions" label="培训机构"></el-table-column>
                    <el-table-column prop="T_content" label="培训内容"></el-table-column>
                    <el-table-column prop="N_cadre" label="干部名称"></el-table-column>
                    <el-table-column prop="certificate" label="证书"></el-table-column>
                    <el-table-column prop="witness" label="证明人"></el-table-column>
                    <el-table-column prop="telephone" label="联系电话"  ></el-table-column>
                    <el-table-column prop="remarks" label="备注"></el-table-column>
        </el-table>

        <!-- <el-dialog title="修改用户" :visible.sync="editBox" width="50%" :before-close="handleClose">
            <el-form ref="form" label-width="100px" v-model="user">
            
                <el-form-item label="状态:">
                    <el-input placeholder="请输入状态" maxlength="50" v-model = "user.state" ></el-input>
                </el-form-item>
                <el-form-item label="职位名称:">
                    <el-input placeholder="请输入职位名称" maxlength="50" v-model = "user.position" ></el-input>
                </el-form-item>
                <el-form-item label="公司部门:">
                    <el-input placeholder="请输入公司部门" maxlength="50" v-model = "user.Department"></el-input>
                </el-form-item>
                <el-form-item label="工作地点:">
                    <el-input placeholder="请输入工作地点" maxlength="50" v-model = "user.adress" ></el-input>
                </el-form-item>
                <el-form-item label="发布城市:">
                    <el-input placeholder="请输入发布城市" maxlength="50" v-model = "user.city" ></el-input>
                </el-form-item>
                <el-form-item label="发布日期:">
                    <el-input placeholder="请输入发布日期" maxlength="50" v-model = "user.date_issue"></el-input>
                </el-form-item>
                <el-form-item label="刷新日期:">
                    <el-input placeholder="请输入刷新日期" maxlength="50" v-model = "user.date_refresh" ></el-input>
                </el-form-item>
                <el-form-item label="结束日期:">
                    <el-input placeholder="请输入结束日期" maxlength="50" v-model = "user.date_end" ></el-input>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input placeholder="请输入排序" maxlength="50" v-model = "user.sort"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleEditUser">确 定</el-button>
            </span>
        </el-dialog> -->

        <el-dialog title="添加用户" :visible.sync="addBox" width="50%" :before-close="handleClose">
            <el-form ref="form" label-width="100px" v-model="addUserData">
                <el-form-item label="序号:">
                    <el-input placeholder="请输入序号" maxlength="50" v-model = "addUserData.number" ></el-input>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-input placeholder="请输入状态" maxlength="50" v-model = "addUserData.state" ></el-input>
                </el-form-item>
                <el-form-item label="培训类型:">
                    <el-input placeholder="请输入培训类型" maxlength="50" v-model = "addUserData.T_type" ></el-input>
                </el-form-item>
                <el-form-item label="开始日期:">
                    <el-input placeholder="请输入开始日期" maxlength="50" v-model = "addUserData.S_date" ></el-input>
                </el-form-item>
                <el-form-item label="结束日期:">
                    <el-input placeholder="请输入结束日期" maxlength="50" v-model = "addUserData.E_date"></el-input>
                </el-form-item>
                <el-form-item label="培训机构:">
                    <el-input placeholder="请输入培训机构" maxlength="50" v-model = "addUserData.T_institutions" ></el-input>
                </el-form-item>
                <el-form-item label="培训内容:">
                    <el-input placeholder="请输入培训内容" maxlength="50" v-model = "addUserData.T_content" ></el-input>
                </el-form-item>
                <el-form-item label="干部名称:">
                    <el-input placeholder="请输入干部名称" maxlength="50" v-model = "addUserData.N_cadre" ></el-input>
                </el-form-item>
                <el-form-item label="证书:">
                    <el-input placeholder="请输入证书" maxlength="50" v-model = "addUserData.certificate"></el-input>
                </el-form-item>
                <el-form-item label="证明人:">
                    <el-input placeholder="请输入证明人" maxlength="50" v-model = "addUserData.witness" ></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input placeholder="请输入联系电话" maxlength="50" v-model = "addUserData.telephone" ></el-input>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input placeholder="请输入备注" maxlength="50" v-model = "addUserData.remarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleAddUser">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "P_management",
        data() {
            return {
                tableData: [{
                    number: '1',
                    state: '学生',
                    T_type: '业余',
                    S_date: '2019-12-11',
                    E_date: '2020-10-10',
                    T_institutions: '河师大',
                    T_content: 'vue',
                    N_cadre: '无',
                    certificate: '无',
                    witness: '张三',
                    telephone: '13488888',
                    remarks: '无',
                }, {
                    number: '2',
                    state: '学生',
                    T_type: '业余',
                    S_date: '2019-12-11',
                    E_date: '2020-10-10',
                    T_institutions: '河师大',
                    T_content: 'vue',
                    N_cadre: '无',
                    certificate: '无',
                    witness: '张三',
                    telephone: '13488888',
                    remarks: '无',
                }, {
                    number: '3',
                    state: '学生',
                    T_type: '业余',
                    S_date: '2019-12-11',
                    E_date: '2020-10-10',
                    T_institutions: '河师大',
                    T_content: 'vue',
                    N_cadre: '无',
                    certificate: '无',
                    witness: '张三',
                    telephone: '13488888',
                    remarks: '无',
                }, {
                    number: '4',
                    state: '学生',
                    T_type: '业余',
                    S_date: '2019-12-11',
                    E_date: '2020-10-10',
                    T_institutions: '河师大',
                    T_content: 'vue',
                    N_cadre: '无',
                    certificate: '无',
                    witness: '张三',
                    telephone: '13488888',
                    remarks: '无',
                }],
                addBox : false,
                editBox:false,
                user:{},
                editIndex:"",
                addUserData:{
                    number: '',
                    state: '',
                    T_type: '',
                    S_date: '',
                    E_date: '',
                    T_institutions: '',
                    T_content: '',
                    N_cadre: '',
                    certificate: '',
                    witness: '',
                    telephone: '',
                    remarks: '',
                },
            }
        },
        methods:{
            handleEditClick(index,row){
                this.editBox = true
                this.user = row
                this.editIndex = index
            },

            // eslint-disable-next-line no-unused-vars
            handleDelClick(index,row){
                this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(index,1)
                    this.$message({showClose: true, message: "删除成功", type: 'success'});
                })
            },
            handleClose(done) {
                done();
            },
            handleEditUser(){
                this.tableData.splice(this.editIndex,1,this.user)
                this.$message({showClose: true, message: "修改成功", type: 'success'});
                this.editBox = false
            },
            handleAddClick(){
                this.addBox = true
            },
            handleAddUser(){
                // let strDate = dateFormat("YYYY-mm-dd",this.addUserData.date)
                // this.addUserData.date = strDate
                this.tableData.push(this.addUserData)
                this.addBox = false
                this.addUserData = {}
                this.$message({showClose: true, message: "添加成功", type: 'success'});
            },
            fabu(){
                alert('上传成功')
            },
        },
    }
   


</script>

<style scoped>
.P_management_add{
    margin: 0 auto;
}
.P_management_add ul>li{
    list-style-type: none;
    float: left;
    margin: 20px ;
}
.T_title{
    text-align: center;
    margin: 30px 115px 0px 0px ;
}
</style>